<template>
    <!-- <h2>回收站</h2>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="工程名称" />
        <el-table-column prop="man" label="归属" width="180" fixed="right" />
        <el-table-column prop="time" label="修改时间" width="180" fixed="right" />
    </el-table> -->
    <el-input v-model="input" @change="inputFn"></el-input>
    <div id="graph"></div>
    <el-button type="primary" @click="button">123</el-button>
    {{ cls }}
</template>

<script setup>

// const tableData = [
//     { time: '2016-05-03', name: '王小虎', man: '上海市普陀区金沙江路 1518 弄' },
// ]




import { onMounted, ref } from 'vue'


import { Graph } from '@antv/x6'
// let graph
// onMounted(() => {
//     graph = new Graph({
//         container: document.getElementById('graph'),
//         width: 800,
//         height: 600,
//     })
//     console.log('🕵️‍♀️', graph, graph.parseJSON([obj]))
// })
const obj = {
    shape: 'rect',
    x: 540,
    y: 240,
    width: 40,
    height: 40,
    label: `Saturation`,
    markup: [
        {
            tagName: 'rect',
            selector: 'body',
        },
        {
            tagName: 'image',
            selector: 'img',
        },
        {
            tagName: 'text',
            selector: 'label',
        },
    ],
    attrs: {
        body: {
            stroke: '#8f8f8f',
            strokeWidth: 1,
            fill: '#fff',
        },
        img: {
            href: '/img/17.webp',
            // 'xlink:href': '/img/.webp',
            refWidth: '97%',
            refHeight: '98%',
            x: 1,
            y: 2,
        },
        text: {
            textVerticalAnchor: 'top',
            refY: '110%',
        }
    },
}
// const cls = ref()
// function button(params) {
//     cls.value = graph.parseJSON([obj])
//     console.log('🤔', cls.value)
//     ytext.insert(0, cls.value)

// }

import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'

const doc = new Y.Doc()
const wsProvider = new WebsocketProvider('ws://localhost:1234', 'my-roomname', doc)

wsProvider.on('status', event => {
    console.log(event, event.status) // 打印 "已连接" 或 "已断开"
})

const ytext = doc.getMap()
ytext.observe(event => {
    console.log('😶', event, ytext.get('asdfasdfasdf'))
    // console.log('delta:', event, event.changes.delta)
    // console.log(event.delta)
    // input.value = event.delta[0].insert
    // cls.value = event.delta[0].insert
    // cls.value = graph.parseJSON([event.delta[0].insert])
    // console.log('🤲', cls.value)
})



const input = ref(), inputFn = () => {
    console.log(input.value)
    ytext.set('asdfasdfasdf', input.value)
}
</script>